<template>
  <div id="app">
    <div class="header">
      <div class="block">
        <el-avatar lazy :size="50" class="headimage" :src="image" @click.native="open"></el-avatar>
      </div>

      <div class="inner">你好, {{ username }}</div>adsf
    </div>
    <avatar-cropper :dialogVisible.sync="dialogVisible" @closeAvatarDialog="closeAvatarDialog"></avatar-cropper>

    <div class="body">
      <p class="card-title">开发相关</p>
      <p class="card-items"> 我的项目 </p>
      <p class="card-items"> 我的合作 </p>
      <p class="card-items"> 我的资源 </p>

      <p class="card-title">账号相关</p>
      <p class="card-items"> 数据中心 </p>
      <p class="card-items"> 信息完善 </p>
      <p class="card-items"> 评论管理 </p>


    </div>

  </div>
</template>

<script>
import avatarCropper from "../headimage.vue"

export default {
  data() {
    return {
      image: 'http://127.0.0.1:8000/show_image?token=' + localStorage.getItem("token"),
      username: localStorage.getItem("username"),
      dialogVisible: false
    }
  },
  methods: {
    open() {
      this.dialogVisible = true;
    },
    base64ToBlob(base64Str) {
      const bytes = new Uint8Array([...base64Str].map(char => char.charCodeAt(0)))
      return new Blob([bytes], {type: 'image/jpeg'})
    },
    upload_it() {
      let newImage = this.$store.state.image.my_crop_image
      console.log(newImage.type)
      this.image = URL.createObjectURL(newImage)

      let filename = "headimage." + newImage.type.split("/")[1]
      let file = new File([newImage], filename) // 修改文件名称
      newImage = file

      let From = new FormData();
      From.append("token", localStorage.getItem("token"))
      From.append("image", newImage)

      let options = {
        method: "POST",
        data: From,
        url: "/upload_image"
      }
      this.$axios(options);
    }
  },
  components: {
    avatarCropper
  },
  name: "usercard"
}
</script>

<style scoped lang="less">
#app {

  width: 340px;
  height: 500px;
  text-align: center;
  background-color: #5D3D5E;


  .header {
    & > * {
      margin-left: 10px;
    }

    width: 100%;
    background-color: #69136a;
    height: 120px;
    align-items: center;
    display: flex;
    align-content: center;
    justify-content: center;
    color: white;
    font-size: 20px;

    .headimage {
      transition: .4s;
      border: none;

      &:hover {
        transform: scale(1.2);
        outline: 3px palegreen solid;
        box-sizing: border-box;
      }
    }

    .inner {

    }

  }
  .body{
    .card-title{
      font-size: 1.4rem;
      margin: 10px 0px;
      cursor: default;
      color: whitesmoke;
      user-select: none;
      background: #5D3D5E;
    }
    .card-items{
      background: #3F0E40;
      color: whitesmoke;
      height: 40px;
      //margin-bottom: 1px;
      border-bottom: 0.4px #7a7575 solid;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: .5s;
      cursor: pointer;
      &:hover{
        background: #4D2A51;
      }
      &:first-child{
        margin-top: 20px;
      }
    }
  }
}
</style>